<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A complete example of Cropper.">
  <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development">
  <meta name="author" content="Fengyuan Chen">
  <title>Cropper</title>


  <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
  <link rel="stylesheet" href="__PUBLIC__/css/cropper.min.css">

  <link rel="stylesheet" href="__PUBLIC__/css/main.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<div class="container" id="crop-avatar">

  <!-- Current avatar -->
  <div class="avatar-view" style="display:none" title="Change the avatar">
    <img src="img/picture.jpg" alt="Avatar">
  </div>
  <!-- Cropping modal -->
  <div class="modal" id="avatar-modal" data-show="true"  aria-labelledby="avatar-modal-label"  tabindex="-1">
    <div class="modal-dialog modal-lg" style='    width: 100%;margin:0'>
      <div class="modal-content">
        <form class="avatar-form" action="{:U('Home/index/saveimg/')}" enctype="multipart/form-data" method="post">
          <div class="modal-header">

            <h4 class="modal-title" id="avatar-modal-label">图片裁切</h4>
          </div>
          <div class="modal-body">
            <div class="avatar-body">

              <!-- Upload image and data -->
              <div class="avatar-upload">
                <input type="hidden" class="avatar-src" name="avatar_src">
                <input type="hidden" class="avatar-data" name="avatar_data">
                <label for="avatarInput">上传图片</label>
                <!--<input type="file" class="avatar-input" id="avatarInput" name="avatar_file" accept="image/*">-->
                <input type="file" class="avatar-input" id="avatarInput" name="avatar_file">
              </div>

              <!-- Crop and preview -->
              <div class="row">
                <div>
                  <div class="avatar-wrapper"></div>
                </div>
              </div>

              <div class="row avatar-btns">
                <div class="col-md-3" align="center" style='float: left;'>
                  <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
                    重新剪裁
                  </button>
                </div>
                <div class="col-md-3" align="center" style='float: right;'>
                  <button type="submit" class="btn btn-primary btn-block avatar-save">完成</button>
                </div>

              </div>
            </div>
          </div>
          <!-- <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div> -->
        </form>
      </div>
    </div>
  </div><!-- /.modal -->

  <!-- Loading state -->
  <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
</div>
<script src="__PUBLIC__/js/jquery.min.js"></script>

<script>

  var aspectRatios_w = parseInt('{$option_w}');
  var aspectRatios_h = parseInt('{$option_h}');

  /*iframeaspect = window.location.href.split("#");
   aspectRatio = '16/9';
   //alert(aspectRatio);
   console.log(aspectRatio);*/
</script>
<script src="__PUBLIC__/js/layer/layer.js"></script>
<script src="__PUBLIC__/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/js/cropper.min.js"></script>
<script src="__PUBLIC__/js/picture.main.js"></script>
</body>
</html>
